// Name:            Datepicker
//
// Description:     Define style for Datepicker
//
// Component:       `.am-datepicker`
//
// Sub-objects:     `.am-datepicker-dropdown`
//                  `.am-datepicker-header`
//                  `.am-datepicker-day`
//                  `.am-datepicker-old`
//                  `.am-datepicker-new`
//                  `.am-datepicker-caret`
//                  `.am-datepicker-dow`
//                  `.am-datepicker-select`
//                  `.am-datepicker-next`
//                  `.am-datepicker-prev`
//                    `.am-datepicker-prev-icon`
//                    `.am-datepicker-next-icon`
//
// Modifiers:       `.am-datepicker-success`
//                  `.am-datepicker-warning`
//                  `.am-datepicker-danger`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// Uses:            Icon
//
// =============================================================================
// Variables
// =============================================================================
@datepicker-primary: @global-secondary;
@datepicker-bg: @white;
@datepicker-td-height: 34px;
@datepicker-thead-height: 48px;
@datepicker-primary-light: fadeout(lighten(@datepicker-primary, 20%), 50%);
@datepicker-primary-dark: darken(@datepicker-primary, 20%);
@datepicker-td-active: darken(saturate(@datepicker-primary, 30%), 20%);
@datepicker-td-new-old: saturate(lighten(@datepicker-primary, 18%), 15%);
@datepicker-td-disable: #999;
@datepicker-td-disable-bg: rgb(250, 250, 250);
@datepicker-width: @datepicker-td-height * 7;
@datepicker-span-width: @datepicker-width / 3;
@datepicker-color: #555;
@datepicker-td-hover: #F0F0F0;
// themes
@datepicker-success-color: @global-success;
@datepicker-warning-color: @global-warning;
@datepicker-danger-color: @global-danger;
.datepicker-color-variant(@color) {
    @theme-primary: @color;
    @theme-color-light: fadeout(lighten(@color, 20%), 50%);
    @theme-color-dark: darken(@color, 20%);
    @theme-color-active: darken(saturate(@color, 30%), 20%);
    @theme-color-new-old: saturate(lighten(@color, 18%), 15%);
    @theme-color-disable: #999;
    tr.@{ns}datepicker-header {
        background: @theme-primary;
    }
    td {
        &.@{ns}datepicker-day.@{ns}disabled {
            color: @theme-color-disable;
        }
        &.@{ns}datepicker-old, &.@{ns}datepicker-new {
            color: @theme-color-new-old;
        }
        &.@{ns}active, &.@{ns}active:hover {
            color: @theme-color-active;
        }
        span {
            &.@{ns}datepicker-old {
                color: @theme-color-new-old;
            }
            &.@{ns}active {
                color: @theme-color-active;
            }
        }
    }
    .@{ns}datepicker-caret {
        border-bottom-color: @theme-primary;
    }
    .@{ns}datepicker-dow {
        color: @theme-color-dark;
    }
    .@{ns}datepicker-select, .@{ns}datepicker-prev-icon, .@{ns}datepicker-next-icon {
        &:hover {
            background: @theme-color-light;
            color: @theme-color-dark;
        }
    }
}

.@{ns}datepicker {
    top: 0;
    left: 0;
    border-radius: @global-radius;
    background: @datepicker-bg;
    box-shadow: 0 0 10px #ccc;
    padding-bottom: 10px;
    margin-top: 10px;
    width: @datepicker-width;
    color: @datepicker-color;
    position: absolute;
    .hook-datepicker;
    table {
        width: 100%;
    }
    tr.@{ns}datepicker-header {
        font-size: 1.6rem;
        color: @white;
        background: @datepicker-primary;
    }
    td, th {
        text-align: center;
        font-weight: normal;
        cursor: pointer;
    }
    th {
        height: @datepicker-thead-height;
    }
    td {
        font-size: 1.4rem;
        &.@{ns}datepicker-day {
            height: @datepicker-td-height;
            width: @datepicker-td-height;
            &:hover {
                background: @datepicker-td-hover;
                height: @datepicker-td-height;
                width: @datepicker-td-height;
            }
        }
        &.@{ns}datepicker-day.@{ns}disabled {
            cursor: no-drop;
            color: @datepicker-td-disable;
            background: @datepicker-td-disable-bg;
        }
        &.@{ns}datepicker-old, &.@{ns}datepicker-new {
            color: @datepicker-td-new-old;
        }
        &.@{ns}active, &.@{ns}active:hover {
            border-radius: @global-radius;
            color: @datepicker-td-active;
            background: @datepicker-td-hover;
        }
        span {
            display: block;
            width: @datepicker-span-width;
            height: 40px;
            line-height: 40px;
            float: left;
            cursor: pointer;
            &:hover {
                background: @datepicker-td-hover;
            }
            &.@{ns}active {
                color: @datepicker-td-active;
                background: @datepicker-td-hover;
            }
            &.@{ns}disabled {
                cursor: no-drop;
                color: @datepicker-td-disable;
                background: @datepicker-td-disable-bg;
            }
            &.@{ns}datepicker-old {
                color: @datepicker-td-new-old;
            }
        }
    }
    .@{ns}datepicker-dow {
        height: 40px;
        cursor: default;
        color: @datepicker-primary-dark;
    }
    .@{ns}datepicker-red {
        color: @global-danger;
    }
}

.@{ns}datepicker-caret {
    display: block!important;
    .caret-up(7px, @datepicker-primary);
    position: absolute;
    top: -7px;
    left: 6px;
    .hook-datepicker-creat;
    .@{ns}datepicker-right & {
        left: auto;
        right: 7px;
    }
    .@{ns}datepicker-up & {
        top: auto;
        bottom: -7px;
        .caret-down(7px, #fff);
    }
}

.@{ns}datepicker-select {
    height: @datepicker-td-height;
    line-height: @datepicker-td-height;
    text-align: center;
    transition: background-color 300ms ease-out;
    &:hover {
        background: @datepicker-primary-light;
        color: @datepicker-primary-dark;
    }
}

.@{ns}datepicker-prev, .@{ns}datepicker-next {
    width: @datepicker-td-height;
    height: @datepicker-td-height;
}

.@{ns}datepicker-prev-icon, .@{ns}datepicker-next-icon {
    width: @datepicker-td-height;
    height: @datepicker-td-height;
    line-height: @datepicker-td-height;
    display: inline-block;
    transition: background-color 300ms ease-out;
    &:hover {
        background: @datepicker-primary-light;
        color: @datepicker-primary-dark;
    }
}

.@{ns}datepicker-prev-icon {
    &:before {
        .am-icon-font;
        content: @fa-var-chevron-left;
    }
}

.@{ns}datepicker-next-icon {
    &:before {
        .am-icon-font;
        content: @fa-var-chevron-right;
    }
}

.@{ns}datepicker-dropdown {
    position: absolute;
    z-index: @z-index-datepicker;
}

@media @small-only {
    .@{ns}datepicker {
        width: 100%;
        td {
            span {
                width: 33.33%;
            }
        }
    }
    .@{ns}datepicker-caret {
        display: none!important;
    }
    .@{ns}datepicker-prev, .@{ns}datepicker-next {
        width: 44px;
        height: 44px;
    }
}

// Modifiers
// =============================================================================
.@{ns}datepicker-success {
    .datepicker-color-variant(@datepicker-success-color);
    .hook-datepicker-success;
}

.@{ns}datepicker-danger {
    .datepicker-color-variant(@datepicker-danger-color);
    .hook-datepicker-danger;
}

.@{ns}datepicker-warning {
    .datepicker-color-variant(@datepicker-warning-color);
    .hook-datepicker-warning;
}

// for React version
// =============================================================================
@datepicker-time-span-width: @datepicker-width / 4;
.@{ns}datepicker>div {
    display: block;
    span.@{ns}datepicker-hour {
        width: @datepicker-time-span-width;
    }
}

.@{ns}datepicker-date {
    display: block;
    &.@{ns}input-group {
        display: table;
    }
}

.@{ns}datepicker-time-box {
    padding: 30px 0 30px 0;
    strong {
        font-size: 5.2rem;
        display: inline-block;
        height: 70px;
        width: 70px;
        line-height: 70px;
        font-weight: normal;
        &:hover {
            border-radius: 4px;
            background: #ECECEC;
        }
    }
    em {
        display: inline-block;
        height: 70px;
        width: 20px;
        line-height: 70px;
        font-size: 5.2rem;
        font-style: normal;
    }
}

.@{ns}datepicker-toggle {
    text-align: center;
    cursor: pointer;
    padding: 10px 0;
    &:hover {
        background: #f0f0f0;
    }
}

// Hooks
// =============================================================================
.hook-datepicker() {}

.hook-datepicker-creat() {}

.hook-datepicker-success() {}

.hook-datepicker-danger() {}

.hook-datepicker-warning() {}